<script setup lang="ts">
import {
  ref,
  //unref,
  watch
} from 'vue'
import { propTypes } from '@/utils/propTypes'
import { ElUpload } from 'element-plus'
import { Dialog } from '@/components/Dialog'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
// import type { UploadProps } from 'element-plus'

const props = defineProps({
  modelValue: propTypes.string.def(''),
  disabled: propTypes.bool.def(false)
})
const fileList: any = ref(changeFileList(props.modelValue))
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
// 删除的时候触发的事件
const handleRemove = (uploadFile: any) => {
  let index = fileList.value.findIndex((item) => {
    return item == uploadFile
  })
  fileList.value.splice(index, 1) //数组中删除这个元素
  emit('update:modelValue', changeModelValue(fileList.value))
}

// 点击查询的时候触发
const handlePictureCardPreview = (uploadFile: any) => {
  if (uploadFile.response) {
    dialogImageUrl.value = uploadFile.response.data
  } else {
    dialogImageUrl.value = uploadFile.url
  }
  dialogVisible.value = true
}
const emit = defineEmits(['update:modelValue'])

// 保存的时候触发
const handleSuccess = (response, rawFile) => {
  if (response.code == 200) {
    rawFile.api_url = response.data.file_url
    emit('update:modelValue', changeModelValue(fileList.value))
  }
}

watch(
  () => props.modelValue,
  (value) => {
    fileList.value = changeFileList(value)
  },
  {
    deep: true,
    immediate: true
  }
)

//转化数据结构
function changeFileList(modelValue) {
  let resData: any = []
  if (modelValue) {
    let modelValue_array: any = modelValue.split(',')
    modelValue_array.forEach((item) => {
      resData.push({ url: item, api_url: item })
    })
  }
  return resData
}

//转化数据结构
function changeModelValue(fileList) {
  let resData: any = []
  fileList.forEach((item) => {
    let newItem = item.api_url
    resData.push(newItem)
  })
  return resData.join(',')
}

// 上传前的效验
const beforeAvatarUpload = (file) => {
  if (file.type === 'image/jpeg' || file.type === 'image/gif' || file.type === 'image/png') {
    return true
  } else {
    alert('请上传图片格式，支持jpeg、gif、png')
    return false
  }
}

const getData = () => {
  return changeModelValue(fileList.value)
}

defineExpose({
  getData
})

const display = ref('inline-flex')

/****************************** 初始化 start ******************************/

const init = async () => {
  if (props.disabled) {
    display.value = 'none'
  }
}
init()

/****************************** 初始化 end ******************************/
</script>

<template>
  <div>
    <ElUpload
      v-model:file-list="fileList"
      :action="appStore.getUploadUrl"
      list-type="picture-card"
      :on-success="handleSuccess"
      :disabled="props.disabled"
      :before-upload="beforeAvatarUpload"
    >
      <Icon icon="carbon:add" class="avatar-uploader-icon" :size="28" />

      <template #file="{ file }">
        <div class="el-upload-list--picture-card" style="display: flex">
          <img class="el-upload-list__item-thumbnail avatar" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview">
              <Icon icon="ep:zoom-in" @click.stop="handlePictureCardPreview(file)" />
            </span>
            <span class="el-upload-list__item-preview" v-if="!props.disabled">
              <Icon icon="ep:delete" @click.stop="handleRemove(file)" />
            </span>
          </span>
        </div>
      </template>
    </ElUpload>

    <Dialog v-model="dialogVisible" title="图片展示">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </Dialog>
  </div>
</template>

<style scoped>
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  display: inline-flex !important;
}
:deep(.el-upload--picture-card) {
  display: v-bind(display);
}
</style>
